<template>
	
	<el-container class="minad">
		<el-aside :style="{'width':isCollapse?'65px':'200px'}" class="left">
	
			<el-menu :router="true" default-active="0" class="el-menu-vertical-demo" :collapse="isCollapse">
				<el-menu-item index="" @click="isCollapse=!isCollapse">
					<i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
					<span slot="title">收起</span>
				</el-menu-item>
				<br><br><br>
				<el-menu-item index="/home/operator/zizi">
					<i class="el-icon-menu"></i>
					<span slot="title">操作员管理</span>
				</el-menu-item>
				
			</el-menu>
	
		</el-aside>
		<router-view></router-view>
	</el-container>
	
	
</template>

<script>
	export default{
		data() {
					return {
						// 控制侧边栏是否折叠
						isCollapse: false,
					}
				},
				created() {
					// onresize 当窗口尺寸发生变化时候
					window.onresize = () => {
						// 获取视口的宽
						var w = window.innerWidth;
						// 如果小于1200 应该折叠
						if (w < 1200) {
							this.isCollapse = true;
							// 否则展开
						} else {
							this.isCollapse = false;
						}
					}
				}
			
	}
</script>

<style lang="less" scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.minad {
		display: flex;
		width: 100vw;
		height: 100vh;
		background-color: #f0f0f0;


		.left {
			height: 100%;
			width: 250px;
			background-color: #fff;
		}

		.right {
			flex: 1;
		}
	}
</style>
